<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-08-19 16:33:13
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 17:18:20
 * @FilePath: /XMate-h5/src/views/myXmate/components/allStagesView.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <h4 v-if="enableBusinessOpportunity" class="text-xs my-2 text-[#757575]">
        {{ item.name }}
      </h4>
      <div
        :class="
          true ? 'flex flex-row flex-wrap gap-2' : 'grid grid-cols-4 gap-2 text-nowrap'
        "
      >
        <div
          :class="`tag ${subItem.selected ? 'active-tag' : ''} `"
          :style="{ marginBottom: item.useFlex ? '10px' : '0' }"
          @click="onClickTag(subItem)"
          v-for="subItem in item.stages"
          :key="subItem.id"
        >
          {{ subItem.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, computed, defineExpose } from "vue";
import { useCommonStore } from "@/store";

const commonStore = useCommonStore();

// enableBusinessOpportunity

const enableBusinessOpportunity = computed(() => {
  return commonStore.enableBusinessOpportunity;
});

const emit = defineEmits(["change"]);

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  allowMultiple: {
    type: Boolean,
    default: true,
  },
});

function onClickTag(tag, sessionItem) {
  if (props.allowMultiple) {
    // 处理多选情况
    tag.selected = !tag.selected;
  } else {
    props.items.forEach((tempItem) => {
      const { stages } = tempItem;
      stages.forEach((subItem) => {
        subItem.selected = false;
        if (subItem.id === tag.id) {
          subItem.selected = true;
        }
      });
    });
  }

  let selectedArr = [];
  props.items.forEach((tempItem) => {
    const { stages } = tempItem;
    stages.forEach((subItem) => {
      if (subItem.selected) {
        selectedArr.push(subItem);
      }
    });
  });

  emit("change", selectedArr);
}

function resetAction() {
  console.log("allStagesView resetAction: ", props.items);
  props.items.forEach((item) => {
    item.stages.forEach((subItem) => {
      subItem.selected = false;
    });
  });
}

defineExpose({
  resetAction,
});
</script>

<style scoped lang="less">
.tag {
  padding: 5px 12px;
  background-color: #f4f5f5;
  font-weight: 400;
  font-size: 12px;
  color: #262626;
  line-height: 18px;
  //   margin: 0 16px 4px 0;
  border-radius: 4px;
  text-align: center;
}

.active-tag {
  color: #436bff;
  background-color: #f0f3ff;
}
</style>
